<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入本地jQuery文件  -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>

</head>
<body>
   <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
   <div id="main" style="width: 600px;height:400px;"></div>

   <script type="text/javascript">
        $(function (){
            //页面一加载就向后端发起请求-ajax
            $.ajax({
                url:"/findSales",//后端接口URI地址
                type:"get",//提交方式 get post
                data:{createTime:"2023-02-06 14:34:50"},//提交参数
                dataType:"json",//返回结果类型：json、html、script.....
                success:function (res){//回调函数 res = salesData
                      if(res.code == 200){//成功
                            //遍历data
                            var productNameArray = new Array();
                            var productNumArray = new Array();
                            $.each(res.data,function (index,item){
                                productNameArray.push(item.sales_product_name);
                                productNumArray.push(item.sales_product_num);
                            })
                          // 基于准备好的dom，初始化echarts实例
                          var myChart = echarts.init(document.getElementById('main'));

                          // 指定图表的配置项和数据
                          var option = {
                              title: {
                                  text: 'ECharts 入门示例'
                              },
                              tooltip: {},
                              legend: {
                                  data: ['销量']
                              },
                              xAxis: {
                                  data: productNameArray
                              },
                              yAxis: {},
                              series: [
                                  {
                                      name: '销量',
                                      type: 'bar',
                                      data: productNumArray
                                  }
                              ]
                          };

                          // 使用刚指定的配置项和数据显示图表。
                          myChart.setOption(option);
                      }
                      if(res.code == 500){//服务端出问题

                      }
                }
            })
        })
   </script>
</body>
</html>